<template>
  <div class="product-card card-shadow">
    <div class="product-image-container">
      <img 
        :src="product.image" 
        :alt="product.name"
        class="product-image"
        @error="handleImageError"
      />
      <div class="product-overlay">
        <el-button 
          type="primary" 
          :icon="View"
          circle
          @click="viewProduct"
          class="overlay-btn"
        />
        <el-button 
          type="success" 
          :icon="ShoppingCart"
          circle
          @click="addToCart"
          class="overlay-btn"
        />
      </div>
    </div>
    
    <div class="product-info">
      <h3 class="product-name" @click="viewProduct">{{ product.name }}</h3>
      <p class="product-description">{{ product.description }}</p>
      
      <div class="product-footer">
        <div class="product-price">
          <span class="current-price">¥{{ product.price }}</span>
          <span v-if="product.originalPrice" class="original-price">
            ¥{{ product.originalPrice }}
          </span>
        </div>
        
        <el-button 
          type="primary" 
          size="small"
          @click="addToCart"
          :loading="isAdding"
          class="add-btn btn-hover"
        >
          <el-icon><Plus /></el-icon>
          加入购物车
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { store } from '@/store'
import { ElMessage } from 'element-plus'
import { 
  View, 
  ShoppingCart, 
  Plus 
} from '@element-plus/icons-vue'

export default {
  name: 'ProductCard',
  components: {
    View,
    ShoppingCart,
    Plus
  },
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const router = useRouter()
    const isAdding = ref(false)
    
    const viewProduct = () => {
      router.push(`/product/${props.product.id}`)
    }
    
    const addToCart = async () => {
      isAdding.value = true
      
      try {
        // 模拟异步添加
        await new Promise(resolve => setTimeout(resolve, 300))
        
        store.addToCart(props.product)
        
        ElMessage.success(`${props.product.name} 已添加到购物车`)
      } catch (error) {
        ElMessage.error('添加失败，请重试')
      } finally {
        isAdding.value = false
      }
    }
    
    const handleImageError = (event) => {
      // 图片加载失败时的处理
      event.target.src = require('@/assets/images/dot.gif')
    }
    
    return {
      isAdding,
      viewProduct,
      addToCart,
      handleImageError,
      // Element Plus icons
      View,
      ShoppingCart
    }
  }
}
</script>

<style scoped>
.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.overlay-btn {
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.product-card:hover .overlay-btn {
  transform: translateY(0);
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-name:hover {
  color: #FF8C00;
}

.product-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 20px;
  font-weight: bold;
  color: #f56565;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.add-btn {
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-info {
    padding: 15px;
  }
  
  .product-name {
    font-size: 16px;
  }
  
  .current-price {
    font-size: 18px;
  }
  
  .product-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .add-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .product-image-container {
    height: 160px;
  }
  
  .product-overlay {
    gap: 10px;
  }
  
  .overlay-btn {
    width: 40px;
    height: 40px;
  }
}
</style>
